<template>
  <div>
     <!-- Breadcrumb 面包屑 导航区-->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">历史查询</a></el-breadcrumb-item>
      <el-breadcrumb-item>历史列表</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- Card 卡片 卡片视图区-->
     <el-card class="box-card">
      <div>
        <el-date-picker
                v-model="queryInfo.m"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期">
        </el-date-picker>
        <el-select v-model="queryInfo.station_id" placeholder="请选择" >
          <el-option
                  v-for="item in stations"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
        <!-- 表格区-->
        <el-table :data="dataList" border stripe>
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="ip" label="IP"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
                <el-tag
                    :type="scope.row.response==='ok'?'success':'danger'"
                >{{scope.row.response==='ok'?'正常':'异常'}}</el-tag>
            </template>
        </el-table-column>

          <el-table-column prop="up_time" label="更新日期"></el-table-column>

          <el-table-column label="操作">
             <!-- 操作模板-->
        <template  slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="showDialog(scope.row.id)"
              >查看</el-button>
          </template>
          </el-table-column>
        </el-table>
          <!-- 分页区域-->
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
     </el-card>
      <!-- 周报详细信息的对话框-->

      <el-dialog
      title="查看扫描信息"
      :visible.sync="DialogVisible"
      width="60%"
      @close="DialogClosed"
      center
      >
      <div algign="center">
        <el-row :gutter="20">
          <el-col :span="7"><div class="grid-content bg-purple"> 编号：{{form.id}}</div></el-col>
          <el-col :span="7"><div class="grid-content bg-purple"> 名称：{{form.name}}</div></el-col>
          <el-col :span="7"><div class="grid-content bg-purple"> IP地址：{{form.ip}}</div></el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"><div class="grid-content bg-purple"> 扫描类型：{{form.type}}</div></el-col>
          <el-col :span="10"><div class="grid-content bg-purple"> 扫描时间：{{form.up_time}}</div></el-col>
        </el-row>
        <el-row :gutter="20" v-show="form.type==='cpu'">
          <el-col :span="10"><div class="grid-content bg-purple"> CPU使用率：{{form.data_usedp}}%</div></el-col>
          <el-col :span="10"><div class="grid-content bg-purple"> CPU状态：{{form.response}}</div></el-col>
        </el-row>
        <el-row :gutter="20" v-show="form.type==='mem'">
          <el-col :span="5"><div class="grid-content bg-purple"> 总内存： {{form.data_total}}</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple"> 已使用内存：{{form.data_used}}</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple">已使用内存比率：{{form.data_usedp}}%</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple">内存状态：{{form.response}}</div></el-col>
        </el-row>
        <el-row :gutter="20" v-show="form.type==='pid'">
          <el-col :span="5"><div class="grid-content bg-purple"> 进程名称：{{form.data_name}}</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple"> 进程占用CPU：{{form.data_total}}</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple">进程消耗内存：{{form.data_used}}%</div></el-col>
          <el-col :span="5"><div class="grid-content bg-purple">进程状态：{{form.response}}</div></el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="DialogClosed">确 定</el-button>
      </span>
      </el-dialog>
  </div>
  </template>

<script>
export default {
  data () {
    return {
      DialogVisible: false, // 查看对话框显示与隐藏
      dataList: [], // 故障列表
      stations: [], // 工作站列表
      total: 0, // 总共有多少条数据
      form: {}, // 详细信息
      queryInfo: {
        // query: '',
        pagenum: 1, // 当前页码数
        pagesize: 10, // 当前每页有多少条
        m: null, // 月份
        station_id: null // 工作函ID
      }
    }
  },

  methods: {
    async getStationData () {
      const { data: res } = await this.$post('Stations/get_stations_list')
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取数据失败' + res.meta.msg)
      this.stations = res.data
      console.log(this.options)
    },
    async getListData () {
      console.log(this.queryInfo)
      const { data: res } = await this.$post('Logs/get_list', this.queryInfo)

      if (res.meta.status !== 200) return this.$message.error('获取数据失败' + res.meta.msg)
      this.dataList = res.data.data
      this.total = res.data.total
    },
    async showDialog (id) { // 显示查看
      // 获取故障详细信息
      const { data: res } = await this.$post('Logs/get_detail', {id: id})
      console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('读取信息失败')
      }
      this.form = res.data

      this.DialogVisible = true
    },
    DialogClosed () {
      // 查看详细确定
      // this.form = null
      this.DialogVisible = false
    },
    handleSearch () { // 搜索
      this.getListData()
    },
    // 监听分页数量设置
    handleSizeChange (newsize) {
      console.log(newsize)
      console.log(this.queryInfo.pagesize)
      this.queryInfo.pagesize = newsize
      this.getListData()
    },
    // 监听页码值改变
    handleCurrentChange (newpage) {
      console.log(newpage)
      this.queryInfo.pagenum = newpage
      this.getListData()
    }
  },
  created () {
    this.getStationData()
  }
}
</script>

<style  scoped>
  .el-row {
    margin-bottom: 20px;
    background: #d3deee;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
    padding-top: 10px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
